<template>
    <div>
        <popup ref="popupRef" title="添加产品" :async="true" width="800px" @confirm="handleSubmit" @close="handleClose">
            <el-form ref="formRef" class="mb-[-16px]" :model="productData" :rules="rules" :inline="true" label-width="80px">
                <el-form-item label="标题" prop="title">
                    <div class="w-80">
                        <el-input v-model="productData.title" placeholder="请输入" type="text" maxlength="100" show-word-limit clearable />
                    </div>
                </el-form-item>
                <el-form-item label="状态" prop="is_enable">
                    <div style="width: 600px;" class="w-80">
                        <el-radio-group v-model="productData.is_enable">
                            <el-radio :label="1">显示</el-radio>
                            <el-radio :label="0">隐藏</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <el-form-item label="排序" prop="index">
                    <div class="w-80">
                        <el-input v-model="productData.index" placeholder="请输入" type="number" maxlength="10" show-word-limit clearable />
                    </div>
                </el-form-item>
                <el-form-item label="产品介绍" prop="content">
                    <editor v-model="productData.content" :height="567" :width="660"/>
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
    import Popup from '@/components/popup/index.vue'
    import { shallowRef, ref, reactive } from 'vue';
    const popupRef = shallowRef<InstanceType<typeof Popup>>()
    const emit = defineEmits(['success', 'close'])
    const mode = ref('add')
    // 表单数据
    const productData = reactive({
        id: '',
        title: '',
        is_enable: '',
        index: '',
        content: ''
    })
    // 表单规则
    const rules = reactive({
        title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
        is_enable: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        index: [{ required: true, message: '请填写排序', trigger: 'blur' }],
        content: [{ required: true, message: '请填写产品介绍', trigger: 'blur' }],
    })
    const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}
    const setFormData = async(data : Record<any, any>) => {
		console.log(data);
		getDetail();
		// const lists  = await productCate({});
		// productCateList.value = lists || [];
	}
    const getDetail = async () => {
		// const data = await productLists({
		// 	page_no: 1,
		// 	page_size: 9999,
		// 	cate_id: queryParams.cate_id,
		// 	name: queryParams.name,
		// 	// account: queryParams.account
		// })
		// channelList.value=data.lists || [];
	}
    const handleSubmit = async () => {
		// mode.value == 'edit' ? await productCateEdit(newFormData) : await productCateAdd(newFormData)
		popupRef.value?.close()
		// emit('success',multipleSelection.value)
	}
    const handleClose = () => {
		emit('close')
	}
    defineExpose({
		open,
		setFormData,
		getDetail
	})
</script>
<style lang="scss" scoped>
</style>